import React from 'react';
import { connect } from 'dva/index';
import { Select } from 'antd';

const R = require('ramda');
const Option = Select.Option;


class PortSelect extends React.Component {
	constructor(props) {
		super(props);
		//this.fetchUser = debounce(this.fetchUser, 500);
		this.initData(props.value, props.portType, true);
	}

	componentWillReceiveProps(nextProps) {
		if (!R.equals(this.props.value)(nextProps.value) || this.props.portType !== nextProps.portType) {
			this.initData(nextProps.value, nextProps.portType)
		}
	}

	initData = (value, portType, flag) => {
		value = R.isNil(value) ? [] : value;
		if (flag) {
			this.state = {
				port: [],
				portType: undefined,
				illegalValue: false,	//是否非法value，如果是，则渲染时把value去掉
				values: undefined	//被选中的值
			}
		}
		if(portType != this.state.portType) this.setState({port2:[]});
		this.props.dispatch({
			type: 'app/getTopTenPorts',
			payload: {
				portType: portType,
				onSuccess: (data) => {
					if (value && value.length >= 1 && value !== "undefined") {
						let array = [];
						array.push(value);
						let temp = value instanceof Array ? value.filter(item => Number.isInteger(Number.parseInt(item))) : array.filter(item => Number.isInteger(Number.parseInt(item))); //过滤非id的值
						this.props.dispatch({
							type: 'app/getByIds',
							payload: {
								ids: temp,
								onSuccess: (portSource) => {
									if(flag) this.state = {...this.state, port: portSource, portType, illegalValue: temp.length !== value.length, port2: portSource};
									else this.setState({ port: portSource, portType, illegalValue: temp.length !== value.length, port2: portSource });
								}
							}
						})
					} else {
						if(flag) this.state = {...this.state, port: data, portType};
						else this.setState({ port: data, portType });
					}
				}
			}
		});
	}

	handleAllPort = (value) => {
		if (!R.isEmpty(value)) {
			this.props.dispatch({
				type: 'app/getListByCodeAndNameAndBusinessType',
				payload: {
					name: value,
					portType: this.state.portType,
					onSuccess: (source) => {
						var port2 = this.state.port2 ? this.state.port2 : [];
						this.setState({ port: [...source, ...port2] })//每次取搜索结果+上次选中的数据源作为新的数据源
					}
				}
			})
		}
	}

	render() {
		let value = this.props.value;
		if (this.state.illegalValue && value && value instanceof Array) {
			value = value.filter(item => Number.isInteger(Number.parseInt(item)));
		}
		let ports = Array.from(new Set(this.state.port ? this.state.port : []));
		return (
			<Select
				showSearch size="large"
				allowClear
				style={this.props.style}
				{...R.omit(['app, value'])(this.props) }
				value={value}
				placeholder="可根据港口代码或关键字搜索"
				// notFoundContent={fetching ? <Spin size="small" /> : null}
				filterOption={false}
				onSearch={this.handleAllPort.bind(this)}
			>
				{
					(ports).map(item => {
						return (<Option value={item.id + ""} key={item.id + ""}>{item.portNameEn + "(" + item.portName + ")"}</Option>);
					})
				}
			</Select>
		);
	}
}

export default connect(({ app }) => ({ app }))(PortSelect)